<template>
	<div class="wrapper">
        <div v-show="shCity">
            <head-title :title="headText" @callback="onClickLeft"></head-title>
            <div class="addbankcard wrapbd">
                <cell-group>
                    <field label="收货人" v-model="name" placeholder="请输入收货人" />
                    <field label="手机号" v-model="mobilenub" type="tel" maxlength="11" placeholder="请输入手机号" />
                </cell-group><br>
                <checkbox-group v-model="result">
                    <cell-group>
                        <cell title="地区" :value="selectCityname" @click='showProvince' is-link/>
                        <field label="详细地址" v-model="address" placeholder="请输入详细地址" />
                        <cell title="是否默认" v-for="item in list" :key="item">
                            <checkbox :name="item" />
                        </cell>
                    </cell-group>
                </checkbox-group>
            </div>
            <input class="l_button" type="button" value="确认" @click="onClickaddBank" :disabled="disableBtn">
        </div>
        <div v-show="allActive">
            <area-list ref='selectpro' @ievent = "ievent"></area-list>
        </div>
	</div>
</template>
<script>
    import HeadTitle from "./../../components/title.vue";
    import AreaList from './../../components/area.vue';
    import { Cell, CellGroup, Field, Checkbox, CheckboxGroup } from 'vant';
	export default {
		data(){
			return {
                headText: '添加收货地址',  //顶部标题
                shCity: true, //显示本页面结构
                allActive: false,  //默认将城市组件隐藏
                iscard:false,  //隐藏开户行
                disableBtn:false,  //防止重复提交
                name:'',  //联系人
                mobilenub:'',   //手机号
                selectCityname:'请选择',  //选中的省市区名称
                address:'',  //详细地址
                list: ['1'],
                result: []
			}
        },
		mounted(){
            this.$route.query.edit == 1 ? (this.headText = "编辑收货地址",this.initialize()):'';
		},
		methods:{
			//返回
            onClickLeft () { this.$router.go(-1);},
            //默认获取地址   编辑
			initialize(){
				var _this = this;
				this.Tools.AXIOS({
                    url: 'address/detail',
                    transformRequest: {
                        id : this.$route.query.id,  //id值
                    },
                    success: function (res) {
                        let result = res.data.data;
                        _this.name = result.user_name;
                        _this.mobilenub = result.moble;
                        _this.selectCityname = result.areas
                        _this.address = result.address;
                    }
                })
			},
            //选择省市区
            showProvince(){
                this.shCity = false; this.allActive = true;
                this.$refs.selectpro.checkGetarealist();  //调用子组件中的方法
            },
            //子组件中的值传递给父组件
            ievent(obj){
                this.shCity = true; this.allActive = false;
                this.selectCityname = obj.provinceName + obj.cityName + obj.areaName;
            },
            //确认添加收货地址
            onClickaddBank(){
                let _this = this;
                if(!this.Tools.regCombination.null.test(_this.name)){
					this.$toast({message: '请输入收货人', position: 'bottom',duration: 1500})
				}else if(!this.Tools.regCombination.null.test(_this.mobilenub)){
                    this.$toast({message: '请输入手机号', position: 'bottom',duration: 1500})
                }else if(!this.Tools.regCombination.phone.test(_this.mobilenub)){
                    this.$toast({message: '请输入正确的手机号', position: 'bottom',duration: 1500})
                }else if(this.selectCityname == '请选择'){
                    this.$toast({message: '请选择地区', position: 'bottom',duration: 1500})
                }else if(!this.Tools.regCombination.null.test(_this.address)){
                    this.$toast({message: '请输入详细地址', position: 'bottom',duration: 1500})
                }else{
                    this.$route.query.edit == 1 ? this.isAddAddress({url:'address/edit',id:this.$route.query.id,msg:'修改成功'}) : this.isAddAddress({url:'address/add',msg:'添加成功'});
                }
            },
            //添加 编辑
            isAddAddress(json){
                let _this = this;
                this.disableBtn = true;
                this.Tools.AXIOS({
                    url: json.url,
                    transformRequest: {
                        id: json.id,
                        user_name: this.name,  //收货人
                        moble: this.mobilenub,   //手机号
                        areas: this.selectCityname,  //省市区
                        address: this.address,  //详细地址
                        is_default: this.result.join(',') || 0
                    },
                    success: function (res) {
                        _this.$toast.success(json.msg);
                        setTimeout(function(){
                            _this.disableBtn = true;
                            _this.$route.query.type == 1 ? _this.$router.push({path:'addressList',query:{type:1}}) : _this.$router.push('/addressList');
                        },1000)
                    },
                    error(res){
                        _this.disableBtn = false;
                    }
                })
            }
		},
		components: {
            HeadTitle,
            Cell,
            CellGroup,
            Field,
            AreaList,
            Checkbox,
            CheckboxGroup
		},
	}
</script>
<style scoped>
.addbankcard label{display: block; background: #F1F1F1; word-wrap: break-word; padding: .3rem .3rem;color: rgb(93,100,110);}
.merchant{ width: 100%; background: #fff; position: absolute; top: 0; z-index: 1000;}
.merchant .forms{ width: 100%; font-size: .35rem; padding: .4rem 0; border-bottom: 1px solid #F1F1F1;}
.merchant .forms label{ padding-left: .5rem; }
.merchant .forms i{ margin:.1rem .2rem 0 0; }
</style>
